<template>
  <div>

    <el-upload
      action="#"
      list-type="picture-card"
      :file-list="list"
      :on-preview="clicks"
      :class="{hasImg:list.length>0}"
      :on-remove="Remove"
      :on-change="onChange"
      :http-request="httpRequest"
    >
      <i class="el-icon-plus" />
    </el-upload>
    <el-dialog
      title="提示"
      :visible="dialogVisible"
      @close="canCal"
    >
      <img class="img" :src="image" alt="">
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      image: null,
      dialogVisible: false,
      list: [
        {
          url: 'https://img0.baidu.com/it/u=4237512277,2836273159&fm=26&fmt=auto'
        }
      ]
    }
  },
  methods: {
    /* 预览 */
    clicks(file) {
      this.dialogVisible = true
      console.log(file)
      this.image = file.url
    },
    /* 移除图片 */
    Remove(file, fileList) {
      console.log(file, fileList)
      this.list = fileList
    },
    /* 切换图片 */
    onChange(file, fileList) {
      console.log(file, fileList)
      this.list = fileList
    },
    httpRequest() {},
    canCal() {
      this.dialogVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.img{
  width: 400px;
  height: 500px;
}
.hasImg{
  ::v-deep .el-upload--picture-card{
  display: none;
}
}
</style>
